<template>
    <div>
        <!-- 添加这里需要加一个括号，因为不传递参数没有括号第一个参数默认接收事件对象 -->
        <el-button type="primary" size="medium" icon="el-icon-plus" @click="addSpuToSpuForm()"
            :disabled="!category3Id">添加SPU</el-button>
        <!-- spu表格 -->
        <el-table :data="pageList" border stripe style="margin:20px 0">
            <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
            <el-table-column label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column label="SPU描述" prop="description"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="{ row, column, $index }">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="addSku(row)"></el-button>
                    <el-button type="warning" size="mini" icon="el-icon-edit-outline"
                        @click="addSpuToSpuForm(row)"></el-button>
                    <el-button type="info" size="mini" icon="el-icon-info" @click="lookSku(row)"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteSpu(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <!--       @size-change="handleSizeChange"
      @current-change="handleCurrentChange" -->
        <el-pagination :current-page="page" :page-sizes="[3, 5, 7, 10]" :page-size="limit"
            layout=" prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>



        <!-- 查看SPU下的所有sku -->
        <el-dialog :title="`${spuName}Sku列表`" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" top="0">
            <el-table stripe :data="SkuList" v-loading="loading">
                <el-table-column label="名称" prop="skuName"></el-table-column>
                <el-table-column label="价格(元)" prop="price"></el-table-column>
                <el-table-column label="重量(KG)" prop="weight"></el-table-column>
                <el-table-column label="默认图片" align="center">
                    <template v-slot="{ row, column, $index }">
                        <el-image :src="row.skuDefaultImg" fit="fill" :lazy="true" style="width:100px;"></el-image>

                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>
    </div>
</template>

<script>
import spuApi from '@/api/spu'
import skuApi from '@/api/sku'
import { mapState } from 'vuex';
import spu from '@/api/spu';
export default {
    name: 'spuForm',
    // isShowSpu控制展示那个页面
    props: ['isShowSpu'],
    data() {
        return {
            page: 1,// 当前页
            limit: 5,// 页大小
            // categoryId: 0,// 三级分类id
            pageList: [],// 分页列表
            total: 0,// 数据总数
            dialogVisible: false,
            SkuList: [],// 用来获取SKU的列表
            spuName: '',// 当前的spu名称
            loading: false,// 加载状态
        }
    },
    methods: {
        // 获取分页列表
        async getPageList() {
            let { page, limit, category3Id } = this
            const res = await spuApi.getIndexList({ page, limit, category3Id })
            // console.log(res);
            if (res.code) {
                this.pageList = res.data.records
                this.total = res.data.total
            }
        },
        // 选择其他的页码
        handleCurrentChange(c) {
            // console.log(c);
            this.page = c
            // 页码发生改变之后重新获取数据
            this.getPageList()
        },
        // 改变页大小
        handleSizeChange(num) {
            // console.log(num);
            this.limit = num
            // 页大小发生改变之后重新获取数据
            this.getPageList()
        },
        // 跳转到添加spu页面
        addSpuToSpuForm(row) {
            // console.log(this);
            // 不管是添加还是修改都会有category3Id 我们跳转的时候将这个第二个参数传递过去
            let { category3Id } = this
            this.isShowSpu({ val: '2', category3Id, row })
        },
        // 关闭当前的sku列表
        handleClose(done) {
            done()
            // this.$confirm('确认关闭？')
            //     .then(_ => {
            //         done();
            //     })
            //     .catch(_ => { });
        },
        // 打开当前sku列表，并且发送请求并渲染我们的数据
        async lookSku(row) {
            // 没次打开之前先把上一次的数据给清空
            this.SkuList = []
            this.spuName = ''
            // 打开加载
            this.loading = true
            // 把弹窗打开
            this.dialogVisible = true
            // 发送请求获取sku数据列表
            const res = await skuApi.findBySpuId(row.id)
            // console.log(res);
            if (res.code === 200) {
                this.SkuList = res.data
                this.spuName = row.spuName
                // 获取到数据之后，为了美观一点开了延时关闭加载
                setImmediate(() => {
                    this.loading = false
                }, 1000)
            }
        },
        // 删除spu
        async deleteSpu(row) {
            const res = await spuApi.deleteSpu(row.id)
            // 删除完成之后进行提示并且重新获取到数据
            if (res.code === 200) {
                this.$message.success('删除成功')
                await this.getPageList()
            } else {
                this.$message.error('删除失败')
            }
        },
        // 跳转到添加sku
        addSku(row) {
            this.isShowSpu({ val: '3', row, })
        }
    },
    watch: {
        category3Id: {
            async handler(val) {
                this.pageList = []
                await this.getPageList()
            },
            // 有可能是从属性管理过来的，我们的分类选择是公共组件，如果他重新回来了，我们需要立即显示已经选择好的分类列表
            immediate: true,
        }
    },
    computed: {
        ...mapState({
            category3Id: state => state.headercategory.category3Id,
        })
    }
}
</script>

<style scoped>
.mysize {
    width: 50%;
}
</style>
